<template>
	<div class="list-supply-wrapper">
		<listtop></listtop>
		<selector @changeOrders="changeOrders"></selector>
		<scroller @loadEvent="freshSupplies" ref="scroller">
			<div class="supply-list-scroll" @click.native="alert(123)">
				<div class="supply-list-item vux-1px-b" v-for="(data,index) in supplyList">
						<router-link :to="{name: 'supplyDetail', params: {id: data.id}}" >
							<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
							<div class="item-ifo">
								<div class="ifo-wrap">
									<div class="ifo-wrap-cell">
										<div class="goods-msg clearfix">
											<div class="goods-name ellipsis-2">
												<i class="pre-label" v-show="data.sale_type==2">预售</i>
												<span class="name">{{data.kind_name}}{{data.title}}</span>
											</div>
											<div class="goods-price">
												<div class="pre-date ellipsis" v-if="data.sale_type==2">
													<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
												</div>
												<div class="price" v-else>
													<label v-if="data.price_type==2" class="face">面议</label>
													<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
												</div>
											</div>
										</div>
										<div class="goods-from">
											<div class="goods-address ellipsis">
												<i class="address-icon"></i>
												<span>{{data.province_name}}</span>
												<span>{{data.city_name}}</span>
											</div>
											<div class="goods-size">
												<label v-if="data.size_unit_name">
													<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
												</label>
												<label v-else>规格不限</label>
											</div>
										</div>
										<div class="goods-seller">
											<div class="seller">
												<label class="name ellipsis">
													<span v-if="data.verify_classify" >{{data.verify_name}}</span>
													<span v-else>{{data.contact_name}}</span>
												</label>
												<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
												<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
												<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
												<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
												<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
												<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
												<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
												<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
											</div>
											<div class="data ellipsis">{{data.updated_view}}</div>
										</div>
									</div>
								</div>
							</div>
						</router-link>
					</div>
				</div>
		</scroller>
	</div>
</template>

<script>
import Listtop from "@/components/Listtop/Listtop.vue"
import Selector from "@/components/Selector"
import Scroller from "@/components/Scroller"

const getList = params =>
  axios.get("/api/trade/supply/getList", {
    params
  })

export default {
  name: 'supplies',
  data() {
    return {
      supplyList: [],
      isHotPage: false, //是否是热卖的路由地址
      page: 1,
      pageSize: 10,
      orders: {
        kind_id: 0,
        order: 1,
        city: 0
      }
    }
  },
  created() {
    this.orders = this.mergeOrderByQuery()
  },
  methods: {
    //条件选择组件回调函数
    getParams() {
      const params = {
        page_size: this.pageSize,
        page: this.page,
        order: this.orders.order
      }
      
      if (this.orders.kind_id !== 0) {
        params.kind_id = this.orders.kind_id
      }
      if (this.orders.city !== 0) {
        params.city = this.orders.city
      }
      return params
    },
    mergeOrderByQuery() {
      let orders = {}
      const q = this.$route.query
      var kind_id = Number(q.kind_id)
      if (!isNaN(kind_id)) {
        orders.kind_id = kind_id
      }
      var city = Number(q.city)
      if (!isNaN(city)) {
        orders.city = city
      }
      var order = Number(q.order)
      if (order !== 0 && !isNaN(order)) {
        orders.order = order
      }
      orders = Object.assign({}, this.orders, orders)
      return orders
    },
    changeOrders(orders) {
      this.orders = orders
      this.$router.push({ name: "supplies", query: orders })
    },
    async freshSupplies({ loaded, nodata }) {
      const params = this.getParams()
      let res
      try {
        res = await getList(params)
      } catch (e) {
        throw new Error(e)
      }
      const data = res.data.resp_data.data
      if (res.data.resp_msg.msg_code !== 200) {
        nodata()
      }
      if (res.data.resp_data.data.length) {
        this.supplyList = this.supplyList.concat(res.data.resp_data.data)
        if (res.data.resp_data.data.length === this.pageSize) {
          loaded()
        } else {
          nodata()
        }
        this.page++
      } else {
        nodata()
      }
      return
    }
  },
  //初始化后通过$route的变化来控制数据
  watch: {
    $route(v, ov) {
      if (v.name === "supplies") {
        this.orders = this.mergeOrderByQuery()
        this.page = 1
        this.supplyList = []
        this.$refs.scroller.refresh()
      }
    }
  },
  components: {
    Listtop,
    Selector,
    Scroller
  }
}
</script>

<style lang="scss">
@import url("../../../styles/common/trade/trade-common.css");
.list-supply-wrapper {
  width: 100%;
  #mt_selector {
    top: 45px;
  }
}
.supply-main-column {
  height: 30px;
  border-bottom: 1px solid #ddd;
  display: flex;
}
.supply-main-column #mt_selector {
  top: 45px;
}

.supply-list-scroll {
  padding-top: 10px;
  background: #fff;
}
</style>
